 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
  <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  <!DOCTYPE html>
  <html>
  <head>
     <meta charset="UTF-8">
     <title>查询消费记录</title>
     <!-- 采用绝对路径导入css文件 -->
     <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/style.css" />
     <!-- 采用绝对路径导入jquery文件 -->
     <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.7.2.js"></script>
     <script type="text/javascript">
         $(function () {
             //验证非空，并提交查询请求
             $("#submit").click(function () {
                 //验证输入框是否为空
                 var keyword = $("#keyword").val();
                 if(keyword ==""){
                     alert("请输入关键字");
                     return false;
                 }else {
                     //javascript语言提供了一个location地址栏对象
                     //它有一个属性href,可以获取浏览器中地址栏地址
                     location.href="${pageContext.request.contextPath }/homeCostServlet?action=query&keyword="+keyword+"&currentPage=1";
                 }

             });

             //删除提示
             $("a.deleteClass").click(function () {
                 //在事件fuction函数中有一个this对象，即当前响应事件的dom对象


                 /**
34                  * confirm是确认提示框函数
35                  * 参数是提示内容
36                  * 两个按钮：确认和取消
37                  * 返回true表示点击确认
                  */
                 return confirm("你确定要删除【"+ $(this).parent().parent().find("td:first").text()+"】?");
             });

         });
     </script>
 </head>
 <body>
     <div id="header">
         <span class="wel_word">查询消费记录</span>
         <div>
                <a href="${pageContext.request.contextPath }/homeCostServlet?action=listByPage&currentPage=1">返回历史记录</a>
                <a href="${pageContext.request.contextPath }/cost_edit.jsp">新增消费记录</a>
                <input style="margin-left:20px"id="keyword" name="keyword" type="text" placeholder="请输入关键字"value=""/>
             <input id="submit"type="submit" value="查询"/>
         </div>
     </div>

     <div id="main">
         <c:if test="${requestScope.queryPageBean.list.size()>0}">
             <table style="margin-top:30px">
             <tr>
                 <td class="costname" style="width:200px">消费名称</td>
                 <td>消费金额</td>
                 <td style="width:200px">登记日期</td>
                 <td colspan="3">操作</td>


             </tr>

             <!-- 使用el表达式注意在jsp页面(如本页面第一行)导入相应的包 -->
             <c:forEach items="${requestScope.queryPageBean.list}" var="item">
                 <tr>

                     <td>${item.name}</td>
                     <td>${item.money}</td>
                     <td>${item.date}</td>
                     <td><a href="${pageContext.request.contextPath }/homeCostServlet?action=getHomeCostById&id=${item.id}&givenSize=${pageBean.pageSize}">修改</a></td>
                     <td><a class="deleteClass" href="${pageContext.request.contextPath }/homeCostServlet?action=delete&id=${item.id}&givenSize=${pageBean.pageSize}">删除</a></td>
                     <td><a href="${pageContext.request.contextPath }/homeCostServlet?action=getDetail&id=${item.id}">详情</a></td>
                 </tr>
             </c:forEach>

             <tr>

                 <td colspan="6" >共有${requestScope.queryPageBean.list.size()}笔消费记录</td>
             </tr>
             </table>




         <jsp:useBean id="queryPageBean" class="main.java.com.fxy.pojo.Page" scope="request"/>
         <div style="text-align: center">

             第${queryPageBean.currentPage}/${queryPageBean.totalPage}页
             总记录数:${queryPageBean.totalSize}条
             每页${queryPageBean.pageSize}条
             <c:if test="${queryPageBean.currentPage != 1}">
                 <a href="${pageContext.request.contextPath}/homeCostServlet?action=query&keyword=${param.keyword}&currentPage=1">
                     [首页]
                 </a>
                 <a href="${pageContext.request.contextPath}/homeCostServlet?action=query&keyword=${param.keyword}&currentPage=${queryPageBean.currentPage-1}">
                     [上一页]
                 </a>
             </c:if>
             <c:if test="${queryPageBean.currentPage != queryPageBean.totalPage}">
                 <a href="${pageContext.request.contextPath}/homeCostServlet?action=query&keyword=${param.keyword}&currentPage=${queryPageBean.currentPage+1}">
                     [下一页]
                 </a>
                 <a href="${pageContext.request.contextPath}/homeCostServlet?action=query&keyword=${param.keyword}&currentPage=${queryPageBean.totalPage}">
                     [尾页]
                 </a>
             </c:if>
         </div>
         </c:if>
         <c:if test="${requestScope.queryPageBean.list.size()==0}">
         <table style="margin-top:30px">
             <tr>
                 <td class="costname" style="width:200px">消费名称</td>
                 <td>消费金额</td>
                 <td style="width:200px">登记日期</td>
                 <td colspan="3">操作</td>


             </tr>
             <tr>
                 <td colspan="6">无相关记录</td>
             </tr>
         </c:if>
     </div>
 </body>
 </html>

